<template>
  <div class="container">
    <div class="top">机器人检测报告</div>
    <div class="header">
      <el-form :model="queryParams" label-width="90px" class="demo-ruleForm">
        <el-form-item label="工艺属性: " prop="poolType">
          <el-select @change="SelectprocessAttr" v-model="queryParams.poolType" placeholder="请选择">
            <el-option v-for="item in AttrOptions" :key="item.label" :label="item.label" :value="item.label">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="池体编号：" prop="poorNo">
          <el-select @change="PoorNoChange" v-model="queryParams.poorNo" multiple placeholder="请选择">
            <el-option v-for="item in PoorNoOptions" :key="item.value" :label="item.label" :value="item.label">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="执行时刻：" prop="execution_time">
          <el-select v-model="queryParams.execution_time" placeholder="请选择">
            <el-option v-for="item in ZQoptions" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <!-- <el-form-item label="任务名称：" prop="taskName">
            <el-input placeholder="请输入任务名称" v-model="queryParams.taskName"></el-input>
          </el-form-item>
          <el-form-item label="机器人名称：" prop="robotName">
            <el-input placeholder="请输入机器人名称" v-model="queryParams.robotName"></el-input>
          </el-form-item> -->
        <el-form-item>
          <el-button type="primary" style=" 
                              background: linear-gradient(0deg, #123150, #1C97B1);
                              border-radius: 2px;
                              border: 1px solid #1560AC;
                              color: #fff;
                              width:80px; 
                              height: 37px;
                              margin: 22px 0 0 -60px" @click="onSearch">搜索</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" style=" 
                              background: linear-gradient(0deg, #081D32, #1DB27C);
                              border-radius: 2px;
                              border: 1px solid #439B2B;
                              color: #fff;
                              width:80px;
                              height: 37px;
                              margin: 22px 0 0 -80px " @click="reset">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="table">
      <div class="right">
        <el-button type="primary" :disabled="multiple" style=" 
                  color: #fff;
                  width:80px; 
                  height: 37px;  
                  background: linear-gradient(0deg, #722943, #05111D);
                  border-radius: 2px;
                  border: 1px solid #942028;
                  margin: 12px 0 0 0" @click="deleteHandle">删除</el-button>
        <el-button type="primary" style=" 
                  color: #fff;
                  width:80px; 
                  height: 37px;  
                  background: linear-gradient(0deg, #123150, #1C97B1);
                  border-radius: 2px;
                  border: 1px solid #1560AC;
                  margin: 12px 0 0 5px" @click="deriveHandle">导出</el-button>

      </div>
      <el-table border :data="tableData" :row-key="(row) => { return row.id }" @selection-change="handleSelectionChange"
        :cell-style="{ background: '#123150', borderColor: '#1560AC', color: '#EDEDED' }"
        :row-style="{ background: '#123150', borderColor: '#1560AC', color: '#EDEDED' }"
        :header-cell-style="{ background: '#123150', borderColor: '#1560AC', color: '#EDEDED', fontSize: '14px', }"
        style="color:#EDEDED; border-color: #1560AC;width:100%">
        <el-table-column type="selection" reserve-selection width="55" align="center">
        </el-table-column>
        <el-table-column prop="robotName" label="机器人名称" align="center">
        </el-table-column>
        <el-table-column prop="taskName" label="任务名称" align="center">
        </el-table-column>
        <el-table-column prop="poolType" label="工艺属性" align="center">
        </el-table-column>
        <el-table-column prop="poolNo" label="池体编号" align="center">
        </el-table-column>
        <el-table-column prop="execution_time" label="执行时刻" align="center">
        </el-table-column>
        <el-table-column prop="adValue" label="氨氮" align="center">
        </el-table-column>
        <el-table-column prop="xdValue" label="硝氮" align="center">
        </el-table-column>
        <el-table-column prop="lsyValue" label="磷酸盐" align="center">
        </el-table-column>
        <el-table-column prop="creater_time" label="创建时间" align="center" width="170">
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.creater_time) }}</span>
          </template>
        </el-table-column>
        <!-- <el-table-column prop="chkNo" label="操作" align="center">
          <template slot-scope="scope">
            <el-button size="mini" type="text" icon="el-icon-document"
              @click="Viewdetails(scope.row)">查看报告详情</el-button>
          </template>
        </el-table-column> -->
      </el-table>
    </div>
    <!-- 查看详情 -->
    <AddOrEdit :dialogTitle="title" :detailsId="detailsId" :appendDialogVisible="appendDialog" @cencelSend="cencel" />
    <!-- 分页 -->
    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
      @pagination="robotReport" />
  </div>
</template>
<script>
import { GetAttrData, GetPoorNoData } from '@/api/cyRobot/quest'
import { DetectionList, dleteReport } from '@/api/cyRobot/report'
import AddOrEdit from './component/addAndEdit.vue'
import moment from 'moment'

export default {
  name: 'report',
  // 父组件里注册子组件
  components: {
    AddOrEdit
  },
  data() {
    return {
      //分页相关
      total: 0, //总条数
      //时间选择器
      valueTime: '',
      // 选中数组   
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      tableData: [],
      //工艺属性
      AttrArry: [],
      AttrOptions: [],
      //池体编号
      PoorNoArry: [],
      PoorNoOptions: [],
      queryParams: {
        poolType: '',
        poorNo: '',
        execution_time: '',
        pageNum: 1,
        pageSize: 4
      },
      value1: [],
      //查看详情按钮
      appendDialog: false,
      //查看详情弹窗
      title: "查看详情",
      //查看详情表单数据
      detailsId: '',
      ZQoptions: [
        {
          value: '01',
          label: '01'
        },
        {
          value: '02',
          label: '02'
        },
        {
          value: '03',
          label: '03'
        },
        {
          value: '04',
          label: '04'
        },
        {
          value: '05',
          label: '05'
        },
        {
          value: '06',
          label: '06'
        },
        {
          value: '07',
          label: '07'
        },
        {
          value: '08',
          label: '08'
        },
        {
          value: '09',
          label: '09'
        },
        {
          value: '10',
          label: '10'
        },
        {
          value: '11',
          label: '11'
        },
        {
          value: '12',
          label: '12'
        },
        {
          value: '13',
          label: '13'
        },
        {
          value: '14',
          label: '14'
        },
        {
          value: '15',
          label: '15'
        },
        {
          value: '16',
          label: '16'
        },
        {
          value: '17',
          label: '17'
        },
        {
          value: '18',
          label: '18'
        },
        {
          value: '19',
          label: '19'
        },
        {
          value: '20',
          label: '20'
        },
        {
          value: '21',
          label: '21'
        },
        {
          value: '22',
          label: '22'
        },
        {
          value: '23',
          label: '23'
        }
      ],
    };
  },
  mounted() {
    this.robotReport()
    this.getAttrData()   //工艺属性列表
  },
  methods: {
    //导出表格
    deriveHandle() {
      const date = new Date();
      const year = date.getFullYear();
      const month = String(date.getMonth() + 1).padStart(2, '0');
      const day = String(date.getDate()).padStart(2, '0');
      const hours = String(date.getHours()).padStart(2, '0');
      const minutes = String(date.getMinutes()).padStart(2, '0');
      const seconds = String(date.getSeconds()).padStart(2, '0');

      const formattedDate = `${year}年${month}月${day}号 ${hours}时${minutes}分${seconds}秒`;
      this.download('cyjqr/cyReportConfig/export', {
        ...this.queryParams
      }, `巡检报告_${formattedDate}.xlsx`)
    },
    //获取工艺属性
    getAttrData() {
      GetAttrData().then(response => {
        this.AttrArry = response.data
        this.AttrOptions = this.AttrArry.map((item, index) => {
          return { value: index, label: item }
        })
      })
    },
    SelectprocessAttr(value) {
      //获取池体编号
      //参数是工艺属性  
      GetPoorNoData({ processAttr: value }).then(response => {
        this.PoorNoArry = response.data
        this.PoorNoOptions = this.PoorNoArry.map((item, index) => {
          return { value: index, label: item }
        })
      })
    },
    PoorNoChange(value) {
      this.queryParams.poolNo = String([value])
    },
    //重置
    reset() {
      this.queryParams.poolType = null
      this.queryParams.poorNo = null
      this.queryParams.execution_time = null
      this.robotReport()
    },
    // 取消
    cencel() {
      this.appendDialog = false;
      //this.formData = {}//子组件触发父组件的cencel方法每次关闭之后将formData清空,方便每次修改是值在变子组件都能监听到值变化并进行相应操作
    },
    //打开新增页面
    Viewdetails(row) {
      this.title = '查看详情'
      this.appendDialog = true
      this.detailsId = row.id
    },
    //机器人检测报告
    robotReport() {
      DetectionList(this.queryParams).then(response => {
        this.tableData = response.rows
        this.total = response.total
      })
    },
    //搜索操作
    onSearch() {
      this.robotReport()
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      if (selection.length != 0) {
        this.single = selection.length != 1
        this.multiple = false
        this.ids = selection.map(item => item.id)
      } else {
        this.multiple = true
      }
    },
    //删除操作
    deleteHandle() {
      const id = String(this.ids.splice(','));//每次删除之前先将ids数组转化为逗号拼接的字符串;
      this.$confirm(`是否删ID为${id}的数据?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        dleteReport(id).then(response => {
          if (response) {
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
            this.robotReport()//删除成功刷新列表
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
  }
}
</script>

<style lang='scss' scoped>
* {
  padding: 0;
  margin: 0;
}

.container {
  background-color: #123150;
  height: calc(100vh - 40px);
  width: 100%;

  .top {
    width: 100%;
    height: 50px;
    text-align: left;
    line-height: 50px;
    background-color: #123150;
    border: 1px solid #1560AC;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 18px;
    // margin: 0 0 0px 10px;
    //padding-left: 20px;
    border-left: none;
    border-top: none;
  }

  .header {
    width: 98%;
    margin: 10px 0 0 10px;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;

    ::v-deep .el-form-item__label {
      margin: 20px 0px 0 0px;
      font-size: 13px;
      color: #b6b7be;
    }

    .demo-ruleForm {
      display: flex;
      flex-wrap: wrap;
    }

    .el-form {
      width: 85%;
      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;

      ::v-deep .el-textarea__inner {
        background-color: #123150;
        border: 1px solid #1560AC;
        margin: 30px 0 0 7px;
        height: 100px;
      }

      ::v-deep .el-input--medium .el-input__inner {
        color: #C1C1C1;
      }

      ::placeholder {
        font-size: 13px;
        color: #b6b7be;
      }

      ::v-deep .el-form-item__label {
        width: 90px !important;
      }

      ::v-deep .el-select {
        margin: 20px 0 0 0;
        width: 150px;
      }
    }

    .el-input {
      width: 140px;
      height: 15px;
      margin: 20px 20px 0 10px;
    }

    ::v-deep .el-input__inner {
      border: 1px solid #1560AC;
      background-color: #123150;
    }

    .dataTimeBox {
      ::v-deep .el-input__inner {
        margin-top: 20px;
        height: 38px;
        width: 240px;
      }

      ::v-deep .el-range-editor .el-range-input {
        background-color: #123150;
      }

    }
  }

  .right {
    display: flex;
    justify-content: flex-start;
    margin-bottom: 10px;
  }

  .table {
    width: 100%;
    //margin: 10px 0 0 0;
    padding-left: 5px;
    padding-right: 5px;

    //最底下的线条
    ::v-deep .el-table::before,
    .el-table--group::after,
    .el-table--border::after {
      background-color: #1560AC;
    }

    //多选框
    ::v-deep .el-checkbox__inner {
      background: #123150;
      border-radius: 1px;
      border: 1px solid #1560AC;
    }

    .el-table__fit {
      background-color: #123150;
    }

    ::v-deep .el-button--default {
      width: 40px;
      height: 20px;
    }

    ::v-deep .el-button--danger {
      width: 50px;
      height: 20px;
    }

    ::v-deep .el-button--primary {
      width: 40px;
      height: 20px;
    }

    .status1Btn1 {
      font-family: Source Han Sans CN;
      font-weight: 500;
      font-size: 14px;
    }

    .status1Btn2 {
      font-family: Source Han Sans CN;
      font-weight: 500;
      font-size: 14px;
      color: #e40106;
    }

    .statusBtn1 {
      font-family: Source Han Sans CN;
      font-weight: 500;
      font-size: 14px;
    }

    .statusBtn2 {
      font-family: Source Han Sans CN;
      font-weight: 500;
      font-size: 14px;
      color: #d2a708;
    }

    .btn1 {
      width: 95px;
      height: 25px;
      color: #fff;
      background: linear-gradient(0deg, #123150, #1C97B1);
      border-radius: 2px;
      border: 1px solid #1560AC;
    }

    ::v-deep .el-table__body-wrapper {
      background-color: #123150;
    }
  }



  .pageBtn {
    width: 99%;
    height: 60px;
    display: flex;
    justify-content: end;
    align-items: center;
  }

}
</style>